import React, { useState } from 'react'
import './Portrait.css'
import e4 from '../../public/img/e4.png'

// 自定义图片组件，处理加载错误
const ImageWithFallback = ({ src, alt, className, style }: { 
  src: string; 
  alt: string; 
  className?: string;
  style?: React.CSSProperties;
}) => {
  const [hasError, setHasError] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

  const handleLoad = () => {
    setIsLoading(false)
    setHasError(false)
  }

  const handleError = () => {
    setIsLoading(false)
    setHasError(true)
  }

  if (hasError) {
    return (
      <div className={`broken-image ${className || ''}`} style={style}>
        <div className="broken-image-icon">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
          </svg>
        </div>
        <div className="broken-image-text">图片加载失败</div>
      </div>
    )
  }

  return (
    <div className={`image-container ${className || ''}`} style={style}>
      {isLoading && (
        <div className="image-loading">
          <div className="loading-spinner"></div>
        </div>
      )}
      <img
        src={src}
        alt={alt}
        onLoad={handleLoad}
        onError={handleError}
        style={{ 
          display: isLoading ? 'none' : 'block',
          width: '100%',
          height: '100%',
          objectFit: 'cover'
        }}
      />
    </div>
  )
}

const navs = [
  { label: '精选推荐' },
  { label: '职业形象' },
  { label: '东方人像' },
  { label: '医疗健康' },
]

const cardsList = [
  // 精选推荐
  [
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.x6Z86GQ_8bTrSnMIrMqIxQHaE8?w=276&h=184&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '春季人像', count: 78 },
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.pYUpCtLDiD1zREU_J7LRggHaE8?w=289&h=193&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '毕业人像', count: 31 },
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ywoG0ffVJ2PQv41D-3pk9QHaEK?w=208&h=117&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '汉服古装', count: 87 },
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.i2U2UiUgUoSzZlbQt-UfOAHaE2?w=276&h=181&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '母婴摄影', count: 100 },
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.U1QBV1gsWI-Pc54tyKyIFgHaIF?w=178&h=194&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '户外游玩', count: 133 },
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7_Lo4rtJpXRiQNT6jHqf4wHaHa?w=184&h=184&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '浪漫情侣', count: 162 },
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.UmNAun3wuQVEr3tuezK10AHaHa?w=174&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '休闲居家少女', count: 81 },
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.tVLXU6NteSZ_imWLaZy73AAAAA?w=266&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '商务团队', count: 133 },
  ],
  // 职业形象
  [
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.edfVINYN2BUv86o0EllLtgAAAA?w=296&h=197&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '职场白领摄影', count: 56 },
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.Erf_MgpohDDfi9KhrAKZBQHaHN?w=194&h=189&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '蓝领工人', count: 42 },
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.oX54n4gJtf40PqMNqW6jaAHaE7?w=302&h=201&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '亚洲医生', count: 29 },
    { img: '', title: '空乘飞行人员', count: 37 },
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.B4x-1kPAGamAL8fwtLQlpwHaE8?w=277&h=184&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '家政服务', count: 21 },
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.oCucbsVxxgVxrRC-NE3x2QHaE7?w=239&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '教师学生摄影', count: 18 },
    { img: 'https://img.shetu66.com/2022/08/31/1661927887691691.jpg', title: '客服职业人员', count: 15 },
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.2qsJ9fRUDlia2Gdw76D0eAHaFj?rs=1&pid=ImgDetMain&o=7&rm=3', title: '健身人像摄影', count: 24 },
  ],
  // 东方人像
  [
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.a78Uih7gMJ3UCvV_byPDxgAAAA?w=205&h=190&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '亚洲家庭', count: 78 },
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iQhrx74frZH3VXyMn5zFXAHaE7?w=297&h=198&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '青年人像摄影', count: 31 },
    { img: 'https://ts1.tc.mm.bing.net/th/id/R-C.fdd68014dd3111af2447d707e1f02338?rik=NqPTJ6pRnUtRsw&riu=http%3a%2f%2fwww.baby611.com%2fpic%2fuserup%2f1406%2f11105535Y39.jpg&ehk=eGPKBo8fLV40nU5QmXzvum9T%2fp45I6GNU2TFzaRcaxs%3d&risl=&pid=ImgRaw&r=0', title: '可爱婴儿', count: 87 },
    { img: 'https://ts4.tc.mm.bing.net/th/id/OIP-C.9QwwlbvGwBJaK0UWrf_OnQHaE8?rs=1&pid=ImgDetMain&o=7&rm=3', title: '儿童人像摄影', count: 100 },
    { img: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.sFFmLjTqa3cGA4PxbNjIHgHaEJ?rs=1&pid=ImgDetMain&o=7&rm=3', title: '亚洲老人', count: 133 },
    { img: 'https://img.shetu66.com/2023/04/19/1681866675002909.jpg', title: '民族服装', count: 162 },
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.5PGatYCd7yGT8wl3npM7SgHaEK?w=333&h=187&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '旗袍美人', count: 81 },
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.4Tk0Rs8zaIhakNGU8qvUkQHaE8?w=275&h=183&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '潮流写真', count: 133 },
  ],
  // 医疗健康
  [
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.tqWbGmdofBns9nZo8DRklQHaFM?w=284&h=199&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '专业医护人员', count: 44 },
    { img: '', title: '儿童医疗', count: 32 },
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.CkOkg_YoHzPiYbgiQM1sFQHaE8?w=239&h=187&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '营养保健', count: 27 },
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.5XTaB3X6c_vcssSR_4_nWwHaFd?w=226&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '医美护肤', count: 19 },
    { img: '', title: '生理疼痛', count: 22 },
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.2TEbL4ea42oMZt9DxItXdgHaE7?w=302&h=200&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '时尚妆容', count: 16 },
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.PmHsvWg07KTWDTWfR0wziwHaEu?w=308&h=196&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '美发', count: 13 },
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.VQaLKMBHaavf3o-GbF6X3QHaIf?w=208&h=238&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '美甲美睫', count: 11 },
  ],
]

function Portrait() {
  const [activeTab, setActiveTab] = useState(2) // 默认东方人像

  return (
    <div className="portrait-page">
      <div className="portrait-title-row">
        <div className="portrait-title">
            <img src={e4} alt="" />
        </div>
        <div className="portrait-navs">
          {navs.map((nav, i) => (
            <div
              key={i}
              className={activeTab === i ? 'portrait-nav active' : 'portrait-nav'}
              onMouseEnter={() => setActiveTab(i)}
            >
              {nav.label}
            </div>
          ))}
        </div>
      </div>
      
      <div className="portrait-grid">
        {cardsList[activeTab].map((card, i) => (
          <div className="portrait-card" key={i}>
            <ImageWithFallback 
              src={card.img} 
              alt={card.title}
              className="portrait-card-image"
            />
            <div className="portrait-card-mask">
              <span className="portrait-card-title">{card.title}</span>
              <span className="portrait-card-count">共{card.count}个作品 &gt;</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default Portrait
